<template>
  <div class="main main_bg">
    <gltitle :titleSize="titleSize" :is_mt="is_mt"  v-if="!$store.state.isApp"></gltitle>
    <div class="h100"  v-if="!$store.state.isApp"></div>
    <div style="height:.2rem"  v-if="$store.state.isApp"></div>

    <div class="container">


      <van-swipe class="my-swipe" :autoplay="0" indicator-color="white" v-if="levelLists" :loop="false" :initial-swipe="level">
        <van-swipe-item v-for="(item,kk) in levelLists" :key="kk">
          <div class='rel' :class="'d'+item.level">
            <img src="../../assets/images/pic_dj1.png" alt="" v-if="item.level == 0">
            <img src="../../assets/images/pic_dj2.png" alt="" v-if="item.level == 1">
            <img src="../../assets/images/pic_dj3.png" alt="" v-if="item.level == 2">
            <img src="../../assets/images/pic_dj4.png" alt="" v-if="item.level == 3">
            <img src="../../assets/images/pic_dj5.png" alt="" v-if="item.level == 4">

            <div class="str" v-if="item.level == level">{{$tc('my_grade.doc3',0)}}</div>
            <div class="str" v-if="item.level > level">{{$tc('my_grade.doc3',1)}}</div>
            <div class="str" v-if="item.level < level">{{$tc('my_grade.doc3',2)}}</div>


            <div class="abs">
              <div class="name">

                {{$store.state.userData.mobile}}
              </div>
              <div class="lv">CC {{item.level}}</div>
              <p>
                <span class="z" v-if="item.level < 4">
<!--                  升级至CC{{item.level+1}}等级还需：-->
                  {{ $t('my_grade.doc11',{1:item.level+1}) }}
                </span>
                <span class="z" v-if="item.level == 4">
                  {{$t('my_grade.doc12')}}
                </span>

                <span class="s"  v-if="item.level == 0">
                  {{ $t('my_grade.doc13',{1:totalAchievement,2:levelLists[item.nextLevel].amount}) }}

<!--                  社区存入量化达到 {{totalAchievement}}/ {{levelLists[item.nextLevel].amount}} USDT-->
                </span>
                <span class="s" v-if="item.level > 0 && item.level < 4">
                   {{ $t('my_grade.doc14') }}
                  {{levelLists[item.nextLevel].existNumber}}/{{levelLists[item.nextLevel].number}} {{item.name}}
                </span>
                <span class="s" v-if="item.level == 4">
                  {{ $t('my_grade.doc15',{1:levelLists[item.nextLevel].existNumber}) }}
<!--                  直推邀请人数以达到 {{levelLists[item.nextLevel].existNumber}}个 CC3-->
                </span>
              </p>
            </div>
          </div>
        </van-swipe-item>


      </van-swipe>


      <div class="line">
        <div class="name tac">{{$t('my_grade.doc8')}}</div>
        <ul class="db tac">
          <li :class="{on:level >= item.level}" v-for="(item,k) in levelLists" :key="k">
            <span class="y"></span>
            <!--<div class="n1" v-if="item.level > 0">{{item.amount}}</div>-->
            <!--<div class="n1" v-else>{{$t('my_grade.doc9')}}</div>-->

            <div class="n2" style="margin-top: .1rem;">{{item.name}}</div>
          </li>
        </ul>
      </div>

<!--      <div class="bottom" :class="{'ispc':mobile==2}">-->
<!--        <ul class="db tac">-->
<!--          <li @click="hindApp(1)">-->
<!--            <div class="ico"><img src="../../assets/images/ico101.png" alt=""></div>-->
<!--            <span>{{ $t('my_grade.doc16') }}</span>-->
<!--          </li>-->
<!--          <li @click="hindApp(2)">-->
<!--            <div class="ico"><img src="../../assets/images/ico102.png" alt=""></div>-->
<!--            <span>{{ $t('my_grade.doc17') }}</span>-->
<!--          </li>-->
<!--          <li @click="hindApp(3)">-->
<!--            <div class="ico"><img src="../../assets/images/ico103.png" alt=""></div>-->
<!--            <span>{{ $t('my_grade.doc18') }}</span>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
    </div>
  </div>
</template>
<script>


  export default {
    data(){
      return {
        mobile:localStorage.getItem('ismobile'),
        titleSize:this.$t('my_grade.title'),
        is_mt:true,
        datainfo:[],
        levelLists:[],
        level:0,
      }
    },


    mounted() {
      // this.currLan = localStorage.getItem("language") || "zh";
      this.$post(this.URL.user.level, {
      }).then(res => {
        if (res.code == 0) {
          this.datainfo = res.data
          this.totalAchievement = res.data.totalAchievement
          this.levelLists = res.data.levelList
          this.level = res.data.level
        } else {
          this.$toast(res.message);
        }
      });
    },
    methods: {
      hindApp(id){
        let code = ''
        if(id == 1){
          this.$router.push({
            path: '/income/team',
          });
        }else if(id == 2 && this.$store.state.isApp) {
          code = this.CMD.app.QRCODE
        }else if(id == 2 && !this.$store.state.isApp) {
          this.$router.push('/user/invite')
        }else if(id==3 && this.$store.state.isApp) {
          code = this.CMD.app.RANKING
        }else{
         this.$router.push({
            path: '/rewardpark',
          });
        }

        if (this.$store.state.isApp) {
          let appResult = {
            code: code,
            data: {
            },
          };
          this.common.callBackApp(appResult);
          return;
        }
      }

    },


  }

</script>


<style lang="less" scoped>
  #app {
    .h100 {
      margin-top: 0;
      height: 0.9rem;
    }
    .container {
      overflow: hidden;
      width: 7.5rem;

    }
    .bottom {
      position: fixed;bottom:0;left:0;
      width: 100%;
      background: #172941;
      padding: .2rem 0;


      img {
        height: .46rem;
      }
      span {
        display: block;
        font-size: .2rem;
        font-weight: 400;
        margin-top: .1rem;
      }
      ul {
        position: relative;
        &:after {
          display: block;
          content:'';
          width: 1.62rem;
          height: 1.62rem;
          background: #172941;border-radius: .81rem;
          position: absolute;
          left:50%;
          margin-left: -.81rem;
          top:-.4rem;
        }
        li {
          position: relative;
          z-index: 2;
        }
        li:nth-child(2) {
          .ico {
            margin-top: -.1rem;
          }
          img {
            height: .48rem;
          }
        }
      }
    }
    .head, .line {
      background: #172941;
      border-radius: .16rem;
      box-shadow: 0px .1rem .14rem 0px rgba(0,0,0,0.03);
      margin-top: .24rem;
    }
    .head {
      font-size: .28rem;
      padding: .45rem 0;
      p {
        font-size: .34rem;
        padding-top: .06rem;
      }
      li {
        position: relative;
      }
      li:nth-child(1):after {
        content:'';
        display: block;
        width: .01rem;
        background: #ededed;
        height: 100%;
        position: absolute;top:0;
        right: 0;
      }
    }
    .line {
      padding: .35rem 0;
      .name {
        font-size: .32rem;

      }
      ul {
        position: relative;
        margin-top: .4rem;
        &:after {
          content:'';
          display: block;
          height: .18rem;
          background: #f0f0f0;
          position: absolute;
          width: 84%;
          margin-left: 8%;
          top:.1rem;left:0;
        }
        li {
          font-size: .24rem;
          position: relative;
          z-index: 2;
          &:after {
            display: block;content:'';
            width: 100%;
            height: .18rem;
            background: #f0f0f0;top:.1rem;
            left:-32%;
            position: absolute;
          }
          &:nth-child(1):after {
            width: 50%;
            right: 0;left:auto;
          }
          &:nth-child(5):after {

          }
          &.on {
            .y {
              border-color: #caa03a;
              background: #e7f1ff;
            }
            &:after {
              background: #e7f1ff !important;
            }
          }

          .n1 {
            color: #999;
            margin: .2rem 0 .06rem 0;
          }
          .y {
            display: block;
            width: .36rem;
            height: .36rem;
            border: .05rem solid #aeaeae;
            border-radius: 50%;
            background: #f0f0f0;
            margin: 0 auto;
            z-index: 2;
            position: relative;
          }
        }
      }
    }
    .go {
      position: absolute;bottom:0;left:0;
      width: 100%;
      padding: .32rem;
      button {
        width: 100%;
        height: .88rem;
        background: #ffbc00;
        border-radius: .12rem;border:0;
        font-size: .32rem;
      }
    }


    .my-swipe {
      margin-top: .24rem;
      margin-left: -.1rem;
      margin-right: -.1rem;
      /deep/ .van-swipe__indicators {
        bottom:.4rem;
        .van-swipe__indicator--active {
          background: #fff !important;
          width: 0.3rem;
        }
      }
      img {
        height: 100%;
        width: 100%;
      }
      .d0 {
        color: #515455;
      }
      .d1 {
        color: #805142;
        .str {
          background: #d69078;
        }
      }
      .d2 {
        color: #596273;
        .str {
          background: #99a6c0;
        }
      }
      .d3 {
        color: #9b6e18;
        .str {
          background: #f3bc2b;
        }
      }
      .d4 {
        color: #794ab6;
        .str {
          background: #ae8be4;
        }
      }
      .abs {
        z-index: 2;
        width: 100%;top:0;left:0;
        padding: .4rem;
        .name {
          font-size: .38rem;
          line-height: .4rem;
          margin-bottom: .4rem;
          img {
            display: inline-block;
            width: .4rem;
            height: .4rem;border-radius: .2rem;
            margin-right: .1rem;
            vertical-align: top;
          }
        }
        .lv {
          font-size: 1rem;
          font-weight: 700;
          line-height: 1rem;
          letter-spacing: -.05rem;
        }
        p {
          font-size: .3rem;
          margin-top: .5rem;
          span.s {
            font-size: .26rem;
            display: block;
            opacity: 0.5;
          }
        }
      }
      .str {
        height: .49rem;
        border-radius: 0 .24rem 0 .24rem;
        opacity: 1;
        background: #a4a4a4;
        font-size: .26rem;
        padding: 0 .2rem;
        color: #fff;
        line-height: .49rem;
        position: absolute;
        right: .1rem;top:0;
      }
    }
  }
</style>
